<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="shortcut icon" href="./favicon.ico" />
    <title>注册</title>
    <link rel="stylesheet" href="./font/iconfont.css">
    <link rel="stylesheet" href="./css/login.css">
    <script src="./js/popup.js"></script>
    <script src="./js/request.js"></script>
    <script src="./js/register.js"></script>
</head>

<body>
    <h2>
        <i class="iconfont icon-wode"></i>
    </h2>
    <form action="">
        <input type="text" name="username" placeholder="请输入用户名">
        <input type="password" name="password" placeholder="请输入密码">
        <input type="password" name="repass" placeholder="请再次输入密码">
        <input type="email" name="email" placeholder="请输入邮箱">
        <input type="number" name="tel" placeholder="请输入手机号">
        <input type="submit" value="注册">
    </form>
    <span>已有账号，去<a href="./login.html">登录</a></span>
</body>
<!-- <script>
    var form = document.querySelector('form')
    var usernameInput = document.querySelector('[name="username"]')
    var passwordInput = document.querySelector('[name="password"]')
    var repassInput = document.querySelector('[name="repass"]')
    var emailInput = document.querySelector('[name="email"]')
    form.onsubmit = function () {
        var usernameReg = /^[a-zA-Z][a-zA-Z0-9]{3,9}$/
        if (!usernameReg.test(usernameInput.value)) {
            alert('用户名不符合规则')
            return false
        }
        var passwordReg = /^.{6,10}$/
        if (!passwordReg.test(passwordInput.value)) {
            alert('密码不符合规则')
            return false
        }
        if (passwordInput.value != repassInput.value) {
            alert('两次密码输入不一致')
            return false
        }
        var emailReg = /(^[1-9]\d{5,9}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((126|163)\.com|yeah\.net)$)/
        if (!emailReg.test(emailInput.value)) {
            alert('邮箱不符合规则')
            return false
        }
        // 表单从这里就跳转走了 - 给服务器发送请求了
        // 希望表单不要跳转，能悄悄的发请求 - ajax
        var xhr = new XMLHttpRequest;
        xhr.open('post', 'http://localhost:3000/front/api/users/register');
        // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        // 发送请求携带参数
        xhr.send(`username=${usernameInput.value}&password=${passwordInput.value}&email=${emailInput.value}`)
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status >= 200 && xhr.status < 300) {
                    var res = xhr.responseText;
                    res = JSON.parse(res)
                    var { error_code, msg } = res
                    alert(msg)
                    if (error_code === 0) {
                        location.href = './login.html'
                    }
                    console.log(res);
                }
            }
        }
        // 阻止默认行为，不允许表单跳转
        return false
    }
</script> -->

</html>